import React, {Component} from 'react'
import {
    View,
    Text,
    TextInput,
    Image,
    StyleSheet,
    ScrollView
} from 'react-native'
import TopHeader from "./TopHeader";
import TopAdsView from './TopAdsView'
import SecondAdsView from './SecondAdsView'
import ShopCenter from "./ShopCenter";
import HotRecommend from "./HotRecommend";

export default class Main extends Component {
    render() {
        return (

            <ScrollView style={{flex:1}}>
                {this.renderNavBar()}
                <TopHeader/>
                {/* 第一个广告板块 */}
                <TopAdsView/>

                <SecondAdsView/>

                {/* 购物中心 */}
                <ShopCenter onItemClick={this._itemClick()}/>

                {/* 热门推荐 */}
                <HotRecommend/>
            </ScrollView>
        )
    }

    _itemClick(){
        console.log("onItemClick")
        // alert('dafds')
    }

    renderNavBar() {
        return (
            <View style={styles.navbarContainer}>
                <Text style={styles.leftOption}>深圳</Text>
                <TextInput style={styles.navbarTextInput}
                           placeholder={'输入商家、品类、商圈'}
                           placeholderTextColor={'#cccccc'}
                           underlineColorAndroid={'transparent'}/>

                <Image source={require('../../../imgs/icon_homepage_message.png')}
                       style={{height: 30, width: 30, marginLeft: 10, marginRight: 10}}/>
                <Image source={require('../../../imgs/icon_homepage_scan.png')} style={{height: 30, width: 30}}/>
            </View>
        )
    }
}

const styles = StyleSheet.create(
    {
        navbarTextInput: {
            fontSize: 14,
            paddingLeft: 15,
            paddingRight: 15,
            flex: 1,
            borderRadius: 25,
            backgroundColor: '#fff',
            marginLeft: 10,
            height: 35,
        },
        leftOption: {
            fontSize: 14,
            color: '#fff'
        },
        navbarContainer: {
            flexDirection: 'row',
            alignItems: 'center',
            height: 55,
            backgroundColor: '#f09738',
            paddingLeft: 15,
            paddingRight: 15
        }
    }
)